import React, { useState, useEffect } from 'react';
// 引入css样式
import '../Index/index.css'

import { Sticky } from 'react-vant';

// 头部搜索框
import Topreact from "../../components/Header/Top"

// 头部搜索框
import Topsearch from '../../components/Top2/Top2'

// 引入轮播图图片
import Carousel_image from "../../components/HeaderCarousel/Carousel_image"

// 引入底部
import Bottom from "../../components/Bottom/bottom"

// 引入右侧固定栏
import Right_fixed from '../../components/Right_fixed/Right_fixed';



const index: React.FC = () => {

  const [showElement, setShowElement] = useState<boolean>(false);
  const triggerDistance = 70;



  useEffect(() => {
    const handleScroll = () => {
      // 获取当前滚动距离
      const scrollY = window.scrollY;

      // 根据滚动距离更新状态
      if (scrollY > triggerDistance) {
        setShowElement(true);
      } else {
        setShowElement(false);
      }
    };

    // 添加滚动事件监听器
    window.addEventListener('scroll', handleScroll);

    // 清除滚动事件监听器
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []); // 空依赖数组确保只在组件挂载时添加监听器


  return (
    <div className='box'>
      <Sticky>
        {/*   顶部  */}
        <div className="top">
          {showElement ? <Topsearch /> : <Topreact />}

        </div>
      </Sticky>

      {/* 中部 */}
      <div className="center">

        {/* 头部底下的轮播图 */}
        <div className='Carousel_image'>
          <Carousel_image></Carousel_image>
        </div>

        <div className='Enter_Design'>
          <span>当前在线120,041,563张</span>
          <span>企业专享75,064,228张</span>
          <a href="">进入包图在线设计</a>
        </div>
      </div>

      {/* 底部 */}
      <div className="bottom">
        <Bottom></Bottom>

      </div>
      <div className='Right_fixed'>
        <Right_fixed></Right_fixed>
      </div>
    </div>
  )
}

export default index
